<template>
  <div class="coinCharging">
    <div class="currencyExchangeCont">
      <div class="currencyTitle center" v-if="coinChargingWay === 1">{{ $t('ct.ct2') }}</div>
      <div class="currencyTitle center" v-if="coinChargingWay === 2">{{ $t('ct.ct1') }}</div>
      <div class="back">
        <div class="flexb mb">
          <!-- 选择币种 -->
          <span class="usedCaption">{{ $t('ct.ct4') }}</span>
          <!-- 充提记录 -->
          <span class="colorThis padr" @click="coinChargingRecordVisible=true;">{{ $t('ct.ct21') }}</span>
        </div>
        <div class="chainbox">
          <el-select v-model="value"
          @change="handleChangeValue('click')" class="nodeSelect">
            <div class="flexc iconImg" slot="prefix">
              <img :src="checkedValue.icon"/>
              <span style="padding-left: 50px;"></span>
            </div>
            <template v-for="item in options">
              <el-option
                :key="item.value"
                :label="item.label"
                :value="item.value"
                class="listClass">
                <div class="iconImg">
                  <img :src="item.icon"/>
                  <span>{{ item.label }}</span>
                  <span class="chain"></span>
                </div>
              </el-option>
            </template>
          </el-select>
          <div class="flexb mt">
            <span></span>
            <!-- 跨链资产信息 -->
            <span class="colorThis flex padr" style="cursor: pointer;" @click="handleOpenInformation">
              {{ $t('ct.ct43') }}
              <i class="iconfont icon-huaban29 iconCls"></i>
            </span>
          </div>
        </div>
        <!-- 链类型： -->
        <div v-if="checkedValue.chainList" class="pt10">
          <div class="pb5">{{ $t('ct.ct3') }}：</div>
          <div class="zjType flex">
            <template v-for="(item, index) in checkedValue.chainList">
              <div v-if="item.show" class="tab"
                :key="index"
                :class="{'active': chainTypeCheckedValue === item.value}"
                @click="handleChainTypeMenu(item)">
                  {{item.label}}
              </div>
            </template>
          </div>
        </div>
      </div>
      <!-- 提币 -->
      <div class="mainCont" v-if="coinChargingWay === 1">
        <!-- <div style="padding: 0 25px 10px;" @click="testAddress = !testAddress;form.address = testAddress
          ? 'fasdfasdfasdfadsfasdfadsfadsfadsfa'
          : 'fasdfasdfasdfadsfasdfadsfadsfadsfadafsdfas'">获取提币地址，当前是{{testAddress ? 32 : 42}} 位地址</div> -->
        <el-form :model="form" ref="form" :rules="rules" label-position="top" class="mb">
          <!-- 提币地址 -->
          <el-form-item class="addressBookCls"
            :label="`${$t('ct.ct9')}（${checkedValue.chain} ${$t('bosChain.chain')}）`"
            prop="address" v-if="checkedValue.chain !== 'EOS'">
            <el-input v-model="form.address"
              :placeholder="$t('ct.ct10', {chain: checkedValue.chain})"
              clearable>
              <!-- <span slot="suffix" class="iconfont icon-huaban212" @click="handleCheckAddress(checkedValue.chain.toLowerCase())"></span> -->
            </el-input>
            <span class="iconfont icon-huaban212" @click="handleCheckAddress(checkedValue.chain.toLowerCase())"></span>
          </el-form-item>
          <!-- 提币地址 -->
          <el-form-item :label="`${$t('ct.ct9')}（${checkedValue.chain} ${$t('bosChain.chain')}）`" prop="address" v-else>
            <el-input
              v-model="form.address"
              :placeholder="$t('ct.ct10', {chain: checkedValue.value})" disabled clearable></el-input>
          </el-form-item>
          <!-- 数量 -->
          <el-form-item :label="$t('jy.number')" prop="number" style="margin-bottom: 0">
            <el-input v-model.trim="form.number"
            type="number"
            @blur="handleFormatNumber"
            :placeholder="`${$t('jy.number')}≧${this.checkedValue.minOrderNumber}`" clearable>
              <span slot="suffix">{{checkedValue.value}}</span>
            </el-input>
          </el-form-item>
          <div class="flexb mb5 balanceCls">
            <span></span>
            <!-- 可用余额 -->
            <span style="cursor: pointer;" @click="form.number = balance;">{{ $t('ct.ct50') }}：
              <span v-if="balance !== null">{{balance}}</span>
              <i v-else class="el-icon-refresh el-icon-loading"></i>
               {{checkedValue.value}}</span>
          </div>
          <!-- 手续费 -->
          <el-form-item :label="$t('ct.ct12')">
            <el-input v-model.trim="checkedValue.free" disabled  clearable>
              <span slot="suffix">{{checkedValue.value}}</span>
            </el-input>
          </el-form-item>
          <!-- 到账数量 -->
          <el-form-item :label="$t('ct.ct11')">
            <el-input v-model="form.quantity" disabled clearable>
              <span slot="suffix">{{checkedValue.value}}</span>
            </el-input>
          </el-form-item>
          <!-- 免费cpu -->
          <div v-if="scatter && scatter.identity
            && scatter.chain === 'eos'"
            style="margin-top: 20px;">
            <div class="freeCpu flex" :style="$store.state.app.language === 'en' ? 'line-height: 15px;' : 'line-height: 10px;'">
              <el-checkbox v-model="freeCpuChecked2"
                :style="$store.state.app.language === 'en' ? 'margin-top: -2px;' :''" style="color: #999; margin-bottom: 10px; margin-top: -10px;">
                {{ $t('swap.s74') }}
              </el-checkbox>
            </div>
          </div>
          <div v-else style="color: #999; margin-bottom: 10px; margin-top: -10px;">&nbsp;</div>
          <!-- 免费cpu end-->
          <!-- 提取按钮 -->
          <el-button
            v-loading="loading"
            style="width:100%"
            type="primary"
            @click="handleSubmit" >
            {{ $t('ct.ct13') }}
          </el-button>
        </el-form>
        <!-- 注意事项： -->
        <div class="tip">{{ $t('ct.ct14') }}</div>
        <div class="tip">1、{{ $t('ct.ct15', {number:this.checkedValue.minOrderNumber, value: this.checkedValue.value}) }}</div>
        <div class="tip">2、{{ $t('swap.s100') }}</div>
        <!-- <div class="tip">{{ $t('ct.ct17') }}</div>
        <div class="tip">{{ $t('ct.ct18') }}</div>
        <div class="tip">{{ $t('ct.ct19') }}</div> -->
        <div class="tip">3、{{ $t('ct.ct20') }}</div>
        <div class="tip">4、{{ $t('ct.ct67') }}</div>
      </div>
      <!-- 充值 -->
      <div class="mainCont" v-if="coinChargingWay === 2">
        <div class="back cb">
          <div v-if="checkedValue.chain === 'EOS'">
            <!-- 充值二维码 -->
            <!-- <p class="center">{{ $t('ct.ct51') }}</p>
            <div class="erweima flexc" v-loading="loadingCode">
              <canvas id="qrcode"></canvas>
            </div> -->
            <!-- 充值地址 -->
            <!-- <p class="center">{{ $t('ct.ct52') }}</p>
            <div class="addressCls">
              {{ checkedValue.contract }}
            </div> -->
            <!-- <div class="copyUrl flexc mt">
              <el-button
                type="primary"
                v-clipboard:copy="checkedValue.contract"
                v-clipboard:success="onCopy"
                v-clipboard:error="onError">
                {{ $t('exchange.copyAddress') }}
              </el-button>
            </div> -->
            <el-form :model="form" ref="form" :rules="rules" label-position="top" class="mb" style="padding: 0;">
              <!-- 充币地址 -->
              <el-form-item :label="$t('ct.ct52')">
                <el-input v-model="checkedValue.contract" disabled></el-input>
              </el-form-item>
              <!-- 充币数量 -->
              <el-form-item :label="$t('ct.ct85')" prop="number" style="margin-bottom: 0">
                <el-input v-model.trim="form.number"
                type="number"
                @blur="handleFormatNumber"
                :placeholder="`${$t('jy.number')}≧${this.checkedValue.minOrderNumber}`" clearable>
                  <span slot="suffix">{{checkedValue.value}}</span>
                </el-input>
              </el-form-item>
              <div class="flexb mb5 balanceCls">
                <span></span>
                <!-- 可用余额 -->
                <span style="cursor: pointer;" @click="form.number = balance;">{{ $t('ct.ct50') }}：
                  <span v-if="balance !== null">{{balance}}</span>
                  <i v-else class="el-icon-refresh el-icon-loading"></i>
                  {{checkedValue.value}}</span>
              </div>
              <!-- 手续费 -->
              <!-- <el-form-item :label="$t('ct.ct12')">
                <el-input v-model.trim="checkedValue.free" disabled clearable>
                  <span slot="suffix">{{checkedValue.value}}</span>
                </el-input>
              </el-form-item> -->
              <!-- 到账数量 -->
              <!-- <el-form-item :label="$t('ct.ct11')">
                <el-input v-model="form.quantity" disabled clearable>
                  <span slot="suffix">{{checkedValue.value}}</span>
                </el-input>
              </el-form-item> -->
            </el-form>
            <!-- 免费cpu -->
            <div v-if="scatter && scatter.identity
              && scatter.chain === 'eos'"
              style="margin-top: 20px;">
              <div class="freeCpu flex" :style="$store.state.app.language === 'en' ? 'line-height: 15px;' : 'line-height: 10px;'">
                <el-checkbox v-model="freeCpuChecked1"
                  :style="$store.state.app.language === 'en' ? 'margin-top: -2px;' :''" style="color: #999; margin-bottom: 10px; margin-top: -10px;">
                  {{ $t('swap.s74') }}
                </el-checkbox>
              </div>
            </div>
            <div v-else style="color: #999; margin-bottom: 10px; margin-top: -10px;">&nbsp;</div>
            <!-- 免费cpu end-->
            <!-- 充值按钮 -->
            <el-button
              v-loading="loading"
              style="width:100%; margin-bottom: 20px;"
              type="primary"
              @click="handleSubmitCharging" >
              {{ $t('ct.ct79') }}
            </el-button>
          </div>
          <div v-else>
            <!-- 充值二维码 -->
            <p class="center">{{ $t('ct.ct51') }}</p>
            <div class="erweima flexc" v-loading="loadingCode">
              <canvas id="qrcode"></canvas>
            </div>
            <!-- 充值地址 -->
            <p class="center">{{ $t('ct.ct52') }}</p>
            <div class="addressCls">
              {{ rechargeAddress }}
            </div>
            <div class="copyUrl flexc mt">
              <el-button
                type="primary"
                v-clipboard:copy="rechargeAddress"
                v-clipboard:success="onCopy"
                v-clipboard:error="onError">
                {{ $t('exchange.copyAddress') }}
              </el-button>
            </div>
          </div>
          <!-- 注意事项： -->
          <div class="tip">{{ $t('ct.ct63') }}</div>
          <div class="tip">1、{{ $t('ct.ct48', {number: checkedValue.minChargingNumber, value: checkedValue.value}) }}</div>
          <div class="tip">2、{{ $t('ct.ct64', {value: checkedValue.value}) }}</div>
          <div class="tip">3、{{ $t('ct.ct65', {block: checkedValue.blockNumber}) }}</div>
          <!-- <div class="tip">最小充值金额：0.1XXX，小于最小金额的充值将不会上账且无法退回。</div> -->
          <div class="tip">4、{{ $t('ct.ct67') }}</div>
        </div>
      </div>
    </div>
    <!-- 充提记录 -->
    <el-dialog
      class="confirmDialog"
      :title="$t('ct.ct21')"
      center
      :visible.sync="coinChargingRecordVisible"
      width="1020px"
      append-to-body>
      <coin-charging-record
      :coinChargingRecordVisible="coinChargingRecordVisible"
      :direction="coinChargingWay === 1 ? 2 : 1"
      :coin="value"/>
    </el-dialog>
    <!-- 未认证用户提示 -->
    <el-dialog
      class="confirmDialog"
      :title="$t('public.tip')"
      center
      :visible.sync="uncertifiedVisible"
      width="470px"
      append-to-body>
      <div class="uncertified">
        <p>{{ $t('ct.ct38') }}</p>
        <div class="flexb btnCont">
          <!-- 继续提现 -->
          <el-button @click="handleTrasfer">
            {{ $t('ct.ct42') }}
          </el-button>
          <!-- 去认证 -->
          <el-button type="primary" @click="handleToVeri" v-loading="veriLoading">
            {{ $t('ct.ct53') }}
          </el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 认证用户提示 -->
    <el-dialog
      class="confirmDialog"
      :title="$t('public.tip')"
      center
      :visible.sync="middleVeriVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @close="handleSuccess"
      width="470px"
      append-to-body>
      <div class="uncertified">
        <p>{{ $t('ct.ct90') }}</p>
        <div class="flexc btnCont">
          <div>
            <!-- 继续提现 -->
            <el-button @click="handleTrasfer" type="primary">
              {{ $t('ct.ct42') }}
            </el-button>
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 提取成功弹窗 -->
    <el-dialog
      class="confirmDialog"
      :title="$t('public.tip')"
      center
      :visible.sync="successVisible"
      width="470px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @close="handleSuccess"
      append-to-body>
      <div class="uncertified">
        <img src="@/assets/img/success.png" alt="">
        <p class="succesWord">{{ $t('ct.ct54') }}</p>
        <p style="color: #999;" class="center tip11" v-if="step === 2">{{ $t('ct.ct41') }}</p>
        <div class="flexc">
          <el-button type="primary" @click="handleSuccess" style="width: 100%; margin-top: 15px;">
            {{ $t('cpuNet.comfirm') }}
          </el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 跨链资产信息 -->
    <el-dialog
      class="confirmDialog"
      center
      :visible.sync="informationVisible"
      width="400px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @close="handleInformation"
      append-to-body>
      <div class="uncertified information">
        <div class="title">{{ $t('ct.ct43') }}</div>
        <!-- 资金托管账户 -->
        <div v-if="checkedValue.value === 'BTC'">
          <div class="color999">{{ $t('ct.ct44',{coin: 'BTC'}) }}:</div>
          <div>{{ circulateCount.BTC }}</div>
          <div class="color999">{{ $t('ct.ct43') }}:</div>
          <div class="colorThis">
            <a href="https://btc.com/1Ben9PnmSb9Ywy2ETm2VFg92qEHFr8DDQy" target="_blank">1Ben9PnmSb9Ywy2ETm2VFg92qEHFr8DDQy</a>
          </div>
        </div>
        <div v-if="checkedValue.value === 'DF'">
          <div class="color999">{{ $t('ct.ct44',{coin: 'DF'}) }}:</div>
          <div>{{ circulateCount.DF }}</div>
          <div class="color999">{{ $t('ct.ct43') }}:</div>
          <div class="colorThis">
            <a href="https://etherscan.io/address/0x431ad2ff6a9C365805eBaD47Ee021148d6f7DBe0" target="_blank" v-if="$store.state.app.language == 'en'|| $store.state.app.language == 'ko'">
              0x431ad2ff6a9C365805eBaD47Ee021148d6f7DBe0
            </a>
            <a href="https://cn.etherscan.com/address/0x431ad2ff6a9C365805eBaD47Ee021148d6f7DBe0" target="_blank" v-else>
              0x431ad2ff6a9C365805eBaD47Ee021148d6f7DBe0
            </a>
          </div>
        </div>
        <div v-if="checkedValue.value === 'ETH'">
          <div class="color999">{{ $t('ct.ct44',{coin: 'ETH'}) }}:</div>
          <div>{{ circulateCount.ETH }}</div>
          <div class="color999">{{ $t('ct.ct43') }}:</div>
          <div class="colorThis">
            <a href="https://etherscan.io/address/0x111152000038Ec30F76f980Bc3704CD2f8540220" target="_blank" v-if="$store.state.app.language == 'en'|| $store.state.app.language == 'ko'">
              0x111152000038Ec30F76f980Bc3704CD2f8540220
            </a>
            <a href="https://cn.etherscan.com/address/0x111152000038Ec30F76f980Bc3704CD2f8540220" target="_blank" v-else>
              0x111152000038Ec30F76f980Bc3704CD2f8540220
            </a>
          </div>
        </div>
        <div v-if="checkedValue.value === 'RRB'">
          <div class="color999">{{ $t('ct.ct44',{coin: 'RRB'}) }}:</div>
          <div>{{ circulateCount.RRB }}</div>
          <div class="color999">{{ $t('ct.ct43') }}:</div>
          <div class="colorThis">
            <a href="https://etherscan.io/address/0x111152000038Ec30F76f980Bc3704CD2f8540220" target="_blank" v-if="$store.state.app.language == 'en'|| $store.state.app.language == 'ko'">
              0x111152000038Ec30F76f980Bc3704CD2f8540220
            </a>
            <a href="https://cn.etherscan.com/address/0x111152000038Ec30F76f980Bc3704CD2f8540220" target="_blank" v-else>
              0x111152000038Ec30F76f980Bc3704CD2f8540220
            </a>
          </div>
        </div>
        <div v-if="checkedValue.value === 'ETHFI'">
          <div class="color999">{{ $t('ct.ct44',{coin: 'ETHFI'}) }}:</div>
          <div>{{ circulateCount.ETHFI }}</div>
          <div class="color999">{{ $t('ct.ct43') }}:</div>
          <div class="colorThis">
            <a href="https://etherscan.io/address/0xc145fef82674b20d022ad0e36b5f1b2645b9f9ee" target="_blank" v-if="$store.state.app.language == 'en'|| $store.state.app.language == 'ko'">
              0xc145fef82674b20d022ad0e36b5f1b2645b9f9ee
            </a>
            <a href="https://cn.etherscan.com/address/0xc145fef82674b20d022ad0e36b5f1b2645b9f9ee" target="_blank" v-else>
              0xc145fef82674b20d022ad0e36b5f1b2645b9f9ee
            </a>
          </div>
        </div>
        <div v-if="checkedValue.value === 'MNT'">
          <div class="color999">{{ $t('ct.ct44',{coin: 'MNT'}) }}:</div>
          <div>{{ circulateCount.MNT }}</div>
          <div class="color999">{{ $t('ct.ct43') }}:</div>
          <div class="colorThis">
            <a href="https://etherscan.io/address/0x310da5e1e61cd9d6eced092f085941089267e71e" target="_blank" v-if="$store.state.app.language == 'en'|| $store.state.app.language == 'ko'">
              0x310da5e1e61cd9d6eced092f085941089267e71e
            </a>
            <a href="https://cn.etherscan.com/address/0x310da5e1e61cd9d6eced092f085941089267e71e" target="_blank" v-else>
              0x310da5e1e61cd9d6eced092f085941089267e71e
            </a>
          </div>
        </div>
        <div v-if="checkedValue.value === 'USDT'">
          <div class="color999">{{ $t('ct.ct44',{coin: 'USDT'}) }}:</div>
          <div>{{ circulateCount.USDT }}</div>
          <div class="color999">{{ $t('ct.ct43') }}(ERC20):</div>
          <div class="colorThis">
            <a href="https://etherscan.io/address/0x111152000038Ec30F76f980Bc3704CD2f8540220" target="_blank" v-if="$store.state.app.language == 'en'|| $store.state.app.language == 'ko'">
              0x111152000038Ec30F76f980Bc3704CD2f8540220
            </a>
            <a href="https://cn.etherscan.com/address/0x111152000038Ec30F76f980Bc3704CD2f8540220" target="_blank" v-else>
              0x111152000038Ec30F76f980Bc3704CD2f8540220
            </a>
          </div>
          <div class="color999">{{ $t('ct.ct43') }}(TRC20):</div>
          <div class="colorThis">
            <a href="https://tronscan.io/#/address/TPMZtYmT2tq8MGWbC35vwDW2u9gJWgabSb" target="_blank">TPMZtYmT2tq8MGWbC35vwDW2u9gJWgabSb</a>
          </div>
          <div class="color999">{{ $t('ct.ct43') }}(EOS):</div>
          <div class="colorThis">
            <a href="https://bloks.io/account/cross.newdex" target="_blank">cross.newdex</a>
          </div>
        </div>
        <div class="flexc">
          <el-button type="primary" @click="handleInformation" style="width: 100%; margin-top: 15px;">
            {{ $t('cpuNet.comfirm') }}
          </el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 充提币服务暂停 -->
    <el-dialog
      class="currencyExchange"
      center
      :visible.sync="withdrawDialogVisible"
      width="470px"
      append-to-body>
      <withdraw-dialog
        @listenWithdrawDialog="withdrawDialogVisible = false;"
        :way="coinChargingWay"
        :chain="checkedValue.chain"/>
    </el-dialog>
    <!-- 地址簿 -->
    <el-dialog
      class="currencyExchange addressDialog"
      :title="$t('address.ls1')"
      center
      :visible.sync="addressBookVisible"
      width="400px"
      append-to-body>
      <address-book
      :addressBookVisible="addressBookVisible"
      @listenAddressBook="handleAddressBook"
      :type="2"
      :addressChain="addressChain"
      :chainValue="value.toUpperCase()"/>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';
import { bitModel } from '@/utils/eos/bitpeicurrex'; // 兑换记录
import { QRcodeCode, authorized, toFixed, accSub, accMul, validateBTC, validateETH, validateTRON } from '@/utils/validate';
import CoinChargingRecord from '@/views/myWallet/components/CoinChargingRecord'; // 充提记录
import WithdrawDialog from '@/components/WithdrawDialog'; // 充提币服务暂停
import AddressBook from '@/components/AddressBook'; // 地址簿
import moment from 'moment';

export default {
  name: 'coinCharging', // 充提币
  data() {
    return {
      // way: 2, // 1-提币 2-充值
      loading: false,
      veriLoading: false, // 去认证
      loadingCode: false,
      coinChargingRecordVisible: false, // 充提记录
      uncertifiedVisible: false, // 未认证用户提示
      middleVeriVisible: false, // 中级认证用户提示
      informationVisible: false, // 跨链资产信息
      successVisible: false, // 提币成功
      addressBookVisible: false, // 地址簿
      rechargeAddress: '', // 充值地址
      balance: null,
      value: 'BTC',
      options: [
        {
          value: 'BTC',
          label: 'BTC',
          icon: 'https://ndi.340wan.com/eos/issue.newdex-btc.png',
          chain: 'BTC',
          coinDecimal: 8,
          contract: 'issue.newdex',
          addressLength: 34,
          free: 0.0005,
          minOrderNumber: 0.001,
          minChargingNumber: 0.001, // 最小充币数量
          blockNumber: 6,
          id: 2,
        },
        {
          value: 'DF',
          label: 'DF',
          icon: 'https://ndi.340wan.com/eos/issue.newdex-df.png',
          chain: 'ETH', // 传递给服务端
          coinDecimal: 6, // 精度
          contract: 'issue.newdex', // 合约
          addressLength: 42, // 地址长度
          free: 0.005, // 手续费
          minOrderNumber: 10, // 最小下单额度
          minChargingNumber: 10, // 最小充币数量
          blockNumber: 12, // 确认块数
          id: 11,
        },
        {
          value: 'ETH',
          label: 'ETH',
          icon: 'https://ndi.340wan.com/eos/issue.newdex-eth.png',
          chain: 'ETH', // 传递给服务端
          coinDecimal: 8, // 精度
          contract: 'issue.newdex', // 合约
          addressLength: 42, // 地址长度
          free: 0.005, // 手续费
          minOrderNumber: 0.01, // 最小下单额度
          minChargingNumber: 0.01, // 最小充币数量
          blockNumber: 12, // 确认块数
          id: 1,
        },
        {
          value: 'ETHFI',
          label: 'ETHFI',
          icon: 'https://ndi.340wan.com/eos/issue.newdex-ethfi.png',
          chain: 'ETH', // 传递给服务端
          coinDecimal: 6, // 精度
          contract: 'issue.newdex', // 合约
          addressLength: 42, // 地址长度
          free: 0.005, // 手续费
          minOrderNumber: 10, // 最小下单额度
          minChargingNumber: 10, // 最小充币数量
          blockNumber: 12, // 确认块数
          id: 9,
        },
        {
          value: 'MNT',
          label: 'MNT',
          icon: 'https://ndi.340wan.com/eos/issue.newdex-mnt.png',
          chain: 'ETH', // 传递给服务端
          coinDecimal: 6, // 精度
          contract: 'issue.newdex', // 合约
          addressLength: 42, // 地址长度
          free: 0.005, // 手续费
          minOrderNumber: 10, // 最小下单额度
          minChargingNumber: 10, // 最小充币数量
          blockNumber: 12, // 确认块数
          id: 10,
        },
        {
          value: 'RRB',
          label: 'RRB',
          icon: 'https://ndi.340wan.com/eos/issue.newdex-rrb.png',
          chain: 'ETH', // 传递给服务端
          coinDecimal: 8, // 精度
          contract: 'issue.newdex', // 合约
          addressLength: 42, // 地址长度
          free: 1, // 手续费
          minOrderNumber: 2, // 最小下单额度
          minChargingNumber: 1, // 最小充币数量
          blockNumber: 12, // 确认块数
          id: 8,
        },
        {
          value: 'USDT',
          label: 'USDT',
          icon: 'https://ndi.340wan.com/eos/issue.newdex-usdt.png',
          chain: 'ETH', // USDT 有2个链类型ERC20(ETH) OMNI(BTC)
          coinDecimal: 8,
          contract: 'issue.newdex',
          addressLength: 42,
          free: 1,
          minOrderNumber: 2,
          minChargingNumber: 1, // 最小充币数量
          blockNumber: 12,
          id: 3,
          chainList: [
            {
              value: 'ETH',
              label: 'ERC20',
              coinDecimal: 8,
              addressLength: 42,
              contract: 'issue.newdex',
              free: 1,
              minOrderNumber: 2,
              minChargingNumber: 1, // 最小充币数量
              blockNumber: 12,
              show: true,
              id: 1,
            },
            {
              value: 'BTC',
              label: 'OMNI',
              coinDecimal: 8,
              addressLength: 34,
              contract: 'issue.newdex',
              free: 4,
              minOrderNumber: 5,
              minChargingNumber: 0.001, // 最小充币数量
              blockNumber: 12,
              show: false,
              id: 5,
            },
            {
              value: 'TRON',
              label: 'TRC20',
              coinDecimal: 8,
              addressLength: 34,
              contract: 'issue.newdex',
              free: 0.5,
              minOrderNumber: 1,
              minChargingNumber: 1, // 最小充币数量
              blockNumber: 1,
              show: true,
              id: 6,
            },
            {
              value: 'EOS',
              label: 'EOS',
              coinDecimal: 8,
              addressLength: 12,
              contract: 'issue.newdex',
              free: 0,
              minOrderNumber: 1,
              minChargingNumber: 1, // 最小充币数量
              blockNumber: 1,
              show: true,
              id: 7,
            },
          ]
        }
      ],
      checkedValue: {},
      chainTypeCheckedValue: 'ETH',
      form: {
        address: '', // 提币地址
        number: '', // 数量
        serviceCharge: null, // 手续费
        quantity: '', // 到账数量
      },
      rules: null,
      orderRules: { // 下单规则（otc等级分配额度）
        level: 1, // 当前用户等级
        maxNumber: 2, // 最大数量
        usedNumber: 0, // 已用数量
      },
      testAddress: false,
      step: 1, // 成功弹窗状态值-1 直接提取  2-审核提取
      circulateCount: { // 当前发行量
        BTC: '',
        ETH: '',
        RRB: '',
        USDT: '',
        ETHFI: '',
        MNT: '',
        DF: '',
      },
      status: {
        ethDepositStatus: 1,
        ethWithdrawStatus: 1,
        btcDepositStatus: 1,
        btcWithdrawStatus: 1,
      },
      withdrawDialogVisible: false, // 充提币服务暂停
      accountAddress: {
        tronDepositAddress: '',
        btcDepositAddress: '',
        ethDepositAddress: '',
      },
      stepStatus: 0, // 未获取到服务状态
      freeCpuChecked1: false,
      freeCpuChecked2: false,
      scatter: {},
      withdrawUsdt: { // 整站限额
        withdrawUsdt1h: {
          count: '',
          time: '',
        },
        withdrawUsdt1d: {
          count: '',
          time: '',
        }
      },
      usdtRate: { // 汇率
        ethUsdtPrice: '',
        btcUsdtPrice: '',
      },
      withdraw: { // 限制额度
        withdrawUsdt1h: '',
        withdrawUsdt1d: '',
        withdrawUsdtSingle: ''
      },
      addressChain: 'eos', // 地址簿链
    }
  },
  components: {
    CoinChargingRecord,
    WithdrawDialog,
    AddressBook,
  },
  props: {
    coinChargingWay: Number, // 1-提币 2-充值
    coinChargingVisible: Boolean,
    coin: {
      type: String,
      default: 'BTC'
    }
  },
  watch: {
    '$store.state.app.scatter.identity': {
      handler: function listen() {
        this.scatter = this.$store.state.app.scatter;
      },
      deep: true,
    },
    '$store.state.app.language': function change() {
      // 获取表单验证
      this.rules = this.handleRuleForm();
    },
    'checkedValue.id': function change() {
      if (this.$refs.form) {
        this.$refs.form.resetFields();
      }
      // 提币
      if (this.coinChargingVisible && this.coinChargingWay === 1) {
        // this.handleFeeStatus(() => {});
        // 获取余额
        this.handleBlanceIvit();
      }
    },
    'checkedValue.chain': function change(val) {
      // 充币情况下EOS直接转账
      if (this.coinChargingVisible && this.coinChargingWay === 2 && val === 'EOS') {
        this.checkedValue.contract = 'cross.newdex';
        this.handleBlanceIvit('EOS');
        this.$nextTick(() => {
          this.handleGetCode('EOS');
        });
      }
      if (this.coinChargingVisible && this.coinChargingWay === 1 && val === 'EOS') {
        this.checkedValue.contract = 'issue.newdex';
        this.form.address = this.$store.state.app.scatter.identity.accounts[0].name;
      }
      if (this.coinChargingVisible && this.coinChargingWay === 1 && val !== 'EOS') {
        this.form.address = '';
      }
    },
    coin: function change(val) {
      this.value = val;
      this.handleChangeValue();
    },
    coinChargingVisible: function change(val) {
      if (val) {
        this.handleMounted();
        // return;
      }
      // this.checkedValue = {};
    },
    'form.number': function change(val) {
      if (parseFloat(val)) {
        this.form.quantity = toFixed(accSub(val, this.checkedValue.free), this.checkedValue.coinDecimal);
        return;
      }
      this.form.quantity = toFixed(0, this.checkedValue.coinDecimal);
    }
  },
  computed: {},
  created() {
    this.rules = this.handleRuleForm();
  },
  mounted() {
    this.scatter = this.$store.state.app.scatter;
    this.value = this.coin || 'BTC';
    this.handleChangeValue();
    this.handleMounted();
  },
  beforeDestroy() {},
  methods: {
    handleMounted() {
      this.loading = false;
      // 获取表单验证
      this.$nextTick(() => {
        if (this.$refs.form) {
          this.$refs.form.resetFields();
        }
      });
      this.accountAddress = {
        tronDepositAddress: '',
        btcDepositAddress: '',
        ethDepositAddress: '',
      }
      this.form = {
        address: '', // 提币地址
        number: '', // 数量
        serviceCharge: null, // 手续费
        quantity: '', // 到账数量
      };
      if (this.coinChargingWay === 1) {
        this.handleBlanceIvit();
      }
      if (this.checkedValue.chain === 'EOS') {
        this.handleChangeValue();
      }
      this.handleFeeStatus((res) => {
        if (res) {
          setTimeout(() => {
            if (this.coinChargingVisible && this.coinChargingWay === 2) {
              if ((this.checkedValue.chain === 'ETH' && Number(this.status.ethDepositStatus) === 0)
              || (this.checkedValue.chain === 'BTC' && Number(this.status.btcDepositStatus) === 0)
              || (this.checkedValue.chain === 'TRON' && Number(this.status.tronDepositStatus) === 0)) {
                this.withdrawDialogVisible = true;
                this.rechargeAddress = '';
                const canvas = document.getElementById('qrcode');
                const canvasGet = document.getElementById('qrcode').getContext('2d');
                canvasGet.clearRect(0, 0, canvas.width, canvas.height);
              } else {
                if (this.coinChargingWay === 1) return;
                if (this.coinChargingWay === 2 && this.checkedValue.chain === 'EOS') {
                  return;
                }
                // this.withdrawDialogVisible = false;
                this.handleGetDepositAddress();
              }
            }
          }, 500);
        }
      });
    },
    handleChangeValue(way) {
      const item = this.options.find(v => v.value === this.value) || {};
      this.checkedValue = item;
      if (this.value === 'USDT') {
        this.handleChainTypeMenu(item.chainList[0], 'USDT');
      }
      if (way === 'click') {
        this.handleAdressByClick();
      }
    },
    // USDT 链类型
    handleChainTypeMenu(item, type) {
      if (item.id === this.checkedValue.id) return;
      // 修改充提EOS精度：提取是八位/充值是四位
      const option = this.options.find(v => v.value === 'USDT');
      if (this.coinChargingWay === 1) {
        // this.options[2].chainList[3].coinDecimal = 8;
        option.chainList[3].coinDecimal = 8;
      } else {
        // this.options[2].chainList[3].coinDecimal = 4;
        option.chainList[3].coinDecimal = 4;
      }
      this.chainTypeCheckedValue = item.value;
      this.checkedValue.chain = item.value;
      this.checkedValue.coinDecimal = item.coinDecimal;
      this.checkedValue.contract = item.contract;
      this.checkedValue.free = item.free;
      this.checkedValue.addressLength = item.addressLength;
      this.checkedValue.minOrderNumber = item.minOrderNumber;
      this.checkedValue.blockNumber = item.blockNumber;
      this.checkedValue.id = item.id;
      if (type !== 'USDT') {
        this.handleAdressByClick();
      }
    },
    handleAdressByClick() {
      if (this.coinChargingWay === 1) return;
      if (this.coinChargingWay === 2 && this.checkedValue.chain === 'EOS') {
        return;
      }
      // 判断暂停服务
      if ((this.checkedValue.chain === 'ETH' && Number(this.status.ethDepositStatus) === 0)
      || (this.checkedValue.chain === 'BTC' && Number(this.status.btcDepositStatus) === 0)
      || (this.checkedValue.chain === 'TRON' && Number(this.status.tronDepositStatus) === 0)) {
        this.withdrawDialogVisible = true;
        this.rechargeAddress = '';
        const canvas = document.getElementById('qrcode');
        const canvasGet = document.getElementById('qrcode').getContext('2d');
        canvasGet.clearRect(0, 0, canvas.width, canvas.height);
        return;
      }
      // 如果没有地址重新请求接口
      if (!this.accountAddress[`${this.checkedValue.chain.toLowerCase()}DepositAddress`]) {
        this.handleGetDepositAddress();
      } else { // 有地址用缓存地址重新生成二维吗
        this.rechargeAddress = this.accountAddress[`${this.checkedValue.chain.toLowerCase()}DepositAddress`];
        this.$nextTick(() => {
          this.handleGetCode();
        });
      }
    },
    // 获取充值地址
    handleGetDepositAddress() {
      // this.handleAuthorized(() => {
      const blockchain = this.checkedValue.chain.toLowerCase();
      const params = {
        blockchain,
      }
      this.$http.post('/account/getDepositAddress', params).then((res) => {
        if (res.code === 1007) {
          authorized(this, (code) => {
            if (code === 'success') { // 授权错误
              setTimeout(() => {
                this.handleGetDepositAddress();
              }, 100);
            }
          });
          return;
        }
        if (res.code !== 0) {
          this.$message.error(res.msg);
          return;
        }
        this.accountAddress = {
          tronDepositAddress: res.tronDepositAddress,
          btcDepositAddress: res.btcDepositAddress,
          ethDepositAddress: res.ethDepositAddress
        }
        this.rechargeAddress = res[`${blockchain}DepositAddress`]
        // 生成二维码
        this.$nextTick(() => {
          this.handleGetCode();
        });
      })
      // });
    },
    // 提币操作
    handleSubmit() {
      if ((this.checkedValue.chain === 'ETH' && Number(this.status.ethWithdrawStatus) === 0)
      || (this.checkedValue.chain === 'BTC' && Number(this.status.btcWithdrawStatus) === 0)
      || (this.checkedValue.chain === 'TRON' && Number(this.status.tronWithdrawStatus) === 0)) {
        this.withdrawDialogVisible = true;
        return;
      }
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          // const canOrder = await this.handleCanOrder();
          // if (!canOrder) return;
          let rate = 1;
          if (this.checkedValue.value === 'ETH') {
            rate = this.usdtRate.ethUsdtPrice;
          } else if (this.checkedValue.value === 'BTC') {
            rate = this.usdtRate.btcUsdtPrice;
          } else if (this.checkedValue.value === 'RRB') {
            rate = this.usdtRate.rrbUsdtPrice;
          } else if (this.checkedValue.value === 'MNT') {
            rate = this.usdtRate.mntUsdtPrice;
          } else if (this.checkedValue.value === 'ETHFI') {
            rate = this.usdtRate.ethfiUsdtPrice;
          } else if (this.checkedValue.value === 'DF') {
            rate = this.usdtRate.dfUsdtPrice;
          }
          const formNum = Number(accMul(this.form.number, rate));
          const withdrawUsdt1dBoolean = moment().isSame(this.withdrawUsdt.withdrawUsdt1d && this.withdrawUsdt.withdrawUsdt1d.time, 'day');
          const withdrawUsdt1hBoolean = moment().isSame(this.withdrawUsdt.withdrawUsdt1h && this.withdrawUsdt.withdrawUsdt1h.time, 'hour');
          // 同一小时成交额大于2000 / 同一天成交额大于10000usdt / 单笔成交大于1000 出现人工提示弹窗
          if ((withdrawUsdt1hBoolean && (formNum + Number(this.withdrawUsdt.withdrawUsdt1h &&
          this.withdrawUsdt.withdrawUsdt1h.count) > Number(this.withdraw.withdrawUsdt1h))) ||
          (withdrawUsdt1dBoolean && (formNum + Number(this.withdrawUsdt.withdrawUsdt1d &&
          this.withdrawUsdt.withdrawUsdt1d.count) > Number(this.withdraw.withdrawUsdt1d))) ||
          formNum > Number(this.withdraw.withdrawUsdtSingle)) {
            this.middleVeriVisible = true;
            return;
          }
          this.handleOrderAction();
        }
      })
    },
    // 充值操作
    handleSubmitCharging() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          const params = {
            quantity: `${toFixed(this.form.number, 4)} ${this.value}`,
            chain: this.checkedValue.chain,
            address: this.form.address,
            freeCpuChecked1: this.freeCpuChecked1
          }
          this.loading = true;
          bitModel.transactionCharging(params, (res) => {
            this.loading = false;
            if (res && res.processed) {
              this.$message.success(this.$t('newpos.successfulOperation'));
              setTimeout(() => {
                this.handleBlanceIvit('EOS');
              }, 2000);
              this.form = {
                address: '', // 提币地址
                number: '', // 数量
                serviceCharge: null, // 手续费
                quantity: '', // 到账数量
              };
              return
            }
            bitModel.handleScatterErrorBack(res)
          })
        }
      })
    },
    // 提币合约执行 step-1 直接提取  2-审核提取
    handleOrderAction(step) {
      const params = {
        quantity: `${toFixed(this.form.number, this.checkedValue.coinDecimal)} ${this.value}`,
        chain: this.checkedValue.chain,
        address: this.form.address,
        freeCpuChecked2: this.freeCpuChecked2
      }
      this.loading = true;
      bitModel.transactionForWithdraw(params, (res) => {
        this.loading = false;
        if (res && res.processed) {
          // this.$emit('listenCoinChargingVisible', 'close');
          // this.uncertifiedVisible = false;
          this.middleVeriVisible = false;
          if (step === 2) {
            this.step = 2;
          }
          this.form = {
            address: '', // 提币地址
            number: '', // 数量
            serviceCharge: null, // 手续费
            quantity: '', // 到账数量
          };
          if (this.coinChargingWay === 1 && this.checkedValue.chain === 'EOS') {
            this.form.address = this.$store.state.app.scatter.identity.accounts[0].name;
          }
          this.successVisible = true;
          this.$message.success(this.$t('newpos.successfulOperation'));
          setTimeout(() => {
            this.handleFeeStatus(() => {});
            this.handleBlanceIvit();
          }, 2000);
          return
        }
        bitModel.handleScatterErrorBack(res)
      })
    },
    // 提币前等级额度判断
    handleCanOrder() {
      return new Promise((reslove, reject) => {
        this.$http.get('/account/getAccountKycLevel').then((res) => {
          if (res.code !== 0) {
            this.$message.error(res.msg);
            reject(false);
          }
          this.orderRules.level = res.kycLevel;
          this.orderRules.maxNumber = res.totalWithdrawAmount;
          this.orderRules.usedNumber = res.withdrawAmount;
          let rate = 1;
          if (this.checkedValue.value === 'ETH') {
            rate = res.btcRate.ethBtcPrice;
          } else if (this.checkedValue.value === 'USDT') {
            rate = res.btcRate.usdtBtcPrice;
          }
          if (accMul(this.form.quantity, rate) <= (this.orderRules.maxNumber - this.orderRules.usedNumber)) {
            reslove(true);
          } else {
            if (this.orderRules.level === 0) {
              this.uncertifiedVisible = true;
            } else {
              this.middleVeriVisible = true;
            }
            reslove(false);
          }
        })
      })
    },
    // 离开焦点格式化小数
    handleFormatNumber() {
      this.form.number = toFixed(this.form.number, this.checkedValue.coinDecimal)
      // this.checkedValue.free = toFixed(this.checkedValue.free, this.checkedValue.coinDecimal)
      this.form.quantity = toFixed(this.form.quantity, this.checkedValue.coinDecimal)
    },
    // 余额获取
    handleBlanceIvit(chain) {
      if (!this.checkedValue.value) return;
      let checkedContract = this.checkedValue.contract;
      if (chain === 'EOS') {
        checkedContract = 'tethertether';
      }
      bitModel.getBitBalance(this.checkedValue.value, checkedContract, (result) => {
        if (result.error) return;
        let res = result;
        if (!res) return;
        if (res.length === 0) {
          res = 0;
        } else {
          res = result[0];
        }
        this.balance = toFixed(parseFloat(res, 0) || 0, this.checkedValue.coinDecimal);
      });
    },
    // 表单验证
    handleRuleForm() {
      // 最小数量规则
      const numberMin = (rule, value, callback) => {
        if (value < this.checkedValue.minOrderNumber) {
          callback(new Error(this.$t('ct.ct55', { number: this.checkedValue.minOrderNumber })));
        } else {
          callback();
        }
      };
      // 余额
      const balance = (rule, value, callback) => {
        if (value > Number(this.balance)) {
          callback(new Error(this.$t('ct.ct56')));
        } else {
          callback();
        }
      };
      // 地址长度判断
      // const addressLength = (rule, value, callback) => {
      //   if (value.length !== this.checkedValue.addressLength) {
      //     callback(new Error(this.$t('ct.ct57', { number: this.checkedValue.addressLength })));
      //   } else {
      //     callback();
      //   }
      // };

      // 币种地址规则
      const validAddress = (rule, value, callback) => {
        if ((!validateBTC(value) && this.checkedValue.chain === 'BTC') ||
            (!validateETH(value) && this.checkedValue.chain === 'ETH') ||
            (!validateTRON(value) && this.checkedValue.chain === 'TRON')) {
          callback(new Error(this.$t('ct.ct84')));
        } else {
          callback();
        }
      };

      return {
        address: [
          { required: true, message: this.$t('ct.ct58'), trigger: 'blur' },
          // { validator: addressLength, trigger: 'blur' },
          { validator: validAddress, trigger: 'blur' },
        ],
        number: [
          { required: true, message: this.$t('ct.ct59'), trigger: 'blur' },
          { validator: balance, trigger: 'blur' },
          { validator: numberMin, trigger: 'blur' }
        ],
      }
    },
    // 跨链资产信息
    handleInformation() {
      this.informationVisible = false;
    },
    handleOpenInformation() {
      this.handleMaxCoin('BTC');
      this.handleMaxCoin('ETH');
      this.handleMaxCoin('USDT');
      this.handleMaxCoin('RRB');
      this.handleMaxCoin('MNT');
      this.handleMaxCoin('ETHFI');
      this.handleMaxCoin('DF');
      this.informationVisible = true;
    },
    // 生成兑换二维码
    handleGetCode(chain) {
      this.loadingCode = true;
      const canvas = document.getElementById('qrcode');
      if (canvas) {
        let params = this.rechargeAddress;
        if (chain === 'EOS') {
          params = 'cross.newdex';
        }
        QRcodeCode(params, canvas, 200, (err) => {
          if (err) {
            this.$message.error(this.$t('wallet.codeError'));
            return;
          }
          this.loadingCode = false;
        })
      }
    },
    onCopy() {
      this.$message.success(this.$t('myWallet.copySuccess'));
    },
    onError() {
      this.$message.error(this.$t('myWallet.copyError'));
    },
    // 继续转账
    handleTrasfer() {
      this.handleOrderAction(2);
    },
    // 关闭成功弹窗
    handleSuccess() {
      this.successVisible = false;
      this.step = 1;
    },
    // 去认证
    handleToVeri() {
      this.veriLoading = true;
      // TOKEN
      const token = localStorage.getItem('Frontend-Token');
      if (!token) {
        // 获取授权
        this.handleAuthorized(() => {
          setTimeout(() => {
            this.$router.push({
              name: 'otc',
              params: {
                personal: 1,
              }
            })
            this.veriLoading = false;
          }, 500)
        });
        return;
      }
      this.$nextTick(() => {
        this.$router.push({
          name: 'otc',
          params: {
            personal: 1,
          }
        })
        this.veriLoading = false;
      })
      // location.href = `${origin}/otc?personal=1`;
    },
    // 授权操作
    handleAuthorized(callback) {
      authorized(this, (code, result) => {
        if (code === 'error') { // 授权错误
          console.log(result); // eslint-disable-line
          this.veriLoading = false;
          return;
        }
        callback();
      });
    },
    // 获取最大和当前发行量
    handleMaxCoin(symbol) {
      // 获取币种发行量
      let nodeobj = null;
      const nodeChecked = this.$store.state.app.nodeChecked;
      nodeobj = nodeChecked[this.$store.state.app.trade.baseChain || 'eos'];
      const kip = nodeobj.url;
      const params = {
        code: 'issue.newdex',
        symbol
      };
      axios.post(`${kip}/v1/chain/get_currency_stats`, params, {
        headers: {
          'Content-Type': 'text/plain;charset=UTF-8',
        }
      }).then((result) => {
        if (result.status === 200) {
          const res = result.data;
          this.circulateCount[symbol] = parseFloat(res[params.symbol].supply, 10);
        }
      }).catch(() => {
        this.circulateCount.BTC = 0.0000000;
        this.circulateCount.ETH = 0.0000000;
        this.circulateCount.USDT = 0.0000000;
        this.circulateCount.RRB = 0.0000000;
        this.circulateCount.MNT = 0.0000000;
        this.circulateCount.ETHFI = 0.0000000;
        this.circulateCount.DF = 0.0000000;
      })
    },
    // 获取手续费和服务状态
    handleFeeStatus(callback) {
      this.$http.get('/swap/getInfo').then((res) => {
        if (res.code !== 0) {
          this.$message.error(res.msg);
          return;
        }
        const fee = res.fee;
        this.status = res.status;
        this.withdrawUsdt.withdrawUsdt1h = res.withdrawUsdt1h;
        this.withdrawUsdt.withdrawUsdt1d = res.withdrawUsdt1d;
        this.usdtRate = res.usdtRate;
        this.withdraw = res.withdraw;
        const optionBTC = this.options.find(v => v.value === 'BTC');
        const optionETH = this.options.find(v => v.value === 'ETH');
        const optionUSDT = this.options.find(v => v.value === 'USDT');
        const optionRRB = this.options.find(v => v.value === 'RRB');
        const optionMNT = this.options.find(v => v.value === 'MNT');
        const optionETHFI = this.options.find(v => v.value === 'ETHFI');
        const optionDF = this.options.find(v => v.value === 'DF');
        optionBTC.free = Number(fee.btcWithdrawFee);
        optionETH.free = Number(fee.ethWithdrawFee);
        optionRRB.free = Number(fee.ethRrbWithdrawFee);
        optionMNT.free = Number(fee.ethMntWithdrawFee);
        optionETHFI.free = Number(fee.ethEthfiWithdrawFee);
        optionDF.free = Number(fee.ethDfWithdrawFee);
        optionUSDT.chainList[0].free = Number(fee.ethUsdtWithdrawFee);
        optionUSDT.chainList[1].free = Number(fee.omniUsdtWithdrawFee);
        optionUSDT.chainList[2].free = Number(fee.tronUsdtWithdrawFee);
        callback(true)
      });
    },
    // 选择地址薄
    handleCheckAddress(chain) {
      this.addressChain = chain;
      this.addressBookVisible = true;
    },
    // 选择地址回调
    handleAddressBook(type, val) {
      if (type === 'check2') {
        this.form.address = val.address;
        this.addressBookVisible = false;
        this.$refs.form.validateField('address');
      }
      if (type === 'close') {
        this.addressBookVisible = val;
      }
    }
  },
}
</script>
<style lang="scss" scoped>
@import '@/assets/css/variables.scss';
.padr {
  padding-right: 10px;
}
.coinCharging{
  padding: 10px 0;

  .colorThis {
    cursor: pointer;
  }

  .currencyTitle {
    font-size: 18px;
    margin-top: -35px;
    margin-bottom: 40px;
  }

  .back {
    padding: 20px 20px 20px;
    background: rgba(233, 242, 255, .58);
    margin-bottom: 25px;
  }

  .chainbox {
    .nodeSelect {
      width: 100%;
    }

    .iconImg {
      padding-left: 10px;
      height: 40px;
      img {
        display: inline-block;
        width: 25px;
      }
    }
    /deep/ .el-input__inner {
      padding-left: 45px;
    }

    .iconCls {
      display: inline-block;
      font-size: 12px;
      vertical-align: middle;
      margin-top: 1px;
      margin-left: 3px;
    }
  }

  .numberBalance {
    padding: 0 20px;
    color: #999;
  }

  .exchangeNum {
    padding: 0 20px;

  }

  /deep/ .el-input__suffix {
    height: auto;
    line-height: 40px;
    font-size: 13px;
  }

  .balanceCls {
    color: #999;

    span:nth-child(2) {
      margin-right: 10px;
      margin-top: 5px;
    }
  }

  .mrbtn {
    width: 100%;
    margin: 5px auto 10px;
  }

  .tip {
    color: #999;
    font-size: 12px;
    padding: 0 20px 0 20px;
    margin-bottom: 5px;
  }

  .erweima {
    width: 200px;
    height: 200px;
    margin: 10px auto 20px;
    background: url('/static/img/noCode.png') no-repeat;
    background-size: 100% 100%;
  }

  .addressCls {
    text-align: center;
    background: #fff;
    padding: 10px 5px;
    margin-top: 10px;
  }
}

.listClass {
  padding-left: 15px;
  .iconImg {
    height: 40px;
    img {
      display: inline-block;
      width: 25px;
      vertical-align: middle;
      margin-top: -4px;
    }

    .chain {
      margin-left: 5px;
      // color: #999;
    }
  }
}
.confirmDialog {
  /deep/ .el-dialog__header {
    padding-top: 25px;
  }

  /deep/ .el-dialog__body {
    padding-top: 10px;
  }
}

.uncertified {
  img {
    display: block;
    margin: 0 auto;
    width: 90px;
  }

  .succesWord {
    font-size: 16px;
    text-align: center;
    margin-top: 5px;
  }

  .tip11 {
    margin: 15px 0 0;
  }

  &.information {
    margin-top: -20px;
    padding: 0 5px 0 5px;

    .title {
      text-align: center;
      color: #278EDA !important;
      font-size: 18px;
      margin-bottom: 30px;
    }

    .colorThis {
      cursor: pointer;
      margin-bottom: 25px;
    }

    div {
      margin-bottom: 8px;
    }
  }
}

.btnCont {
  margin-top: 15px;
  padding: 0 20px;
}

.zjType {
  .tab {
    position: relative;
    display: inline-block;
    width: 25%;
    padding: 10px 0;
    border-radius: 3px;
    color: #999;
    border: 1px solid #e4e7ed;
    text-align: center;
    cursor: pointer;
  }

  .tab {
    margin-right: 15px;
  }

  .active {
    color: $-btn-blue;
    border-color: $-btn-blue;
    background: #fff;
  }
}

.copyUrl {
  margin-bottom: 30px;
}

.cb {
  .tip {
    padding-left: 0 !important;
  }
}

.icon-huaban212 {
  position: absolute;
  right: 10px;
  top: -100%;
  cursor: pointer;
  color: #333;
  font-size: 18px;
}

.addressBookCls {
  /deep/ .el-input__suffix {
    right: 10px;
  }
}

.addressDialog {
  /deep/ .el-dialog__header {
    padding-top: 30px;
  }

  /deep/ .el-dialog__body {
    padding-top: 10px;
  }
}

.theme-1B1D27 {
  .conversion {
    color: RGBA(197, 206, 228, 1);
    border: 1px solid #4e5b85;
    background: #152247;
  }

  .back, .backBlue, .addressCls {
    background-color: rgb(33, 42, 63);
  }

  .exchangeCapition {
    i {
      background: rgb(33, 42, 63) !important;
    }
  }
  .zjType {
    .tab {
      color: rgba(255, 255, 255, 0.5);
      border-color: RGBA(197, 206, 228, 0.3);
    }
    .tab.active {
      color: $-btn-blue;
      border-color: $-btn-blue;
      background: #152247 !important;
    }
  }
  .mask {
    background: #152247 !important;
  }
  .icon-huaban212 {
    color: #fff;
  }
}
</style>
